<template>
	<div class="list">
		<tmpHeader :index='2' />
		<h2 class="tit">“{{nick}}”公众号</h2>
		<div class="main">
			<div class="select" v-for="(item,index) in list" :key='index'>
				<h2 class="title">{{ item.name }}</h2>
				<div class="all">
					<div class="item" v-for="(items,index) in item.child" :key='index'>
						<Checkbox v-model="items.flag" class="content">{{ items.menuName }}</Checkbox>
						<!-- 排序 -->
						<div class="sort">
							<span>排序</span>
							<InputNumber :min="1" :max='999' v-model="items.priority" style="width:100px;"></InputNumber>
						</div>
						<!-- 快捷菜单 -->
						<div class="sort">
							<span>快捷菜单</span>
							<iSwitch size="large" v-model="items.shortcutFlag">
								<span slot="open">开启</span>
								<span slot="close">关闭</span>
							</iSwitch>
						</div>
					</div>
				</div>
			</div>
			<div class = 'main_save'>
				<Button type="primary" @click="save" >
					<Icon type="ios-checkmark" style="margin-right: 5px" />保存
				</Button>
				<Button @click="back">
					<i class = "iconfont icon-butongyi icon"></i>取消
				</Button>
			</div>				
		</div>
	</div>
</template>
<script>
import api from "@/api/commonApi";
import tmpHeader from "../tmpHeader";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
	components: {
		tmpHeader
	},
	data() {
		return {
			nick: '',
			appid: '',
			list: []
		};
	},
	created() {
		this.nick = localStorage.getItem("nick");
		let iv = store.state.iv;
		let salt = store.state.salt;
		this.appid = aesUtils.decrypt(salt,iv,"wxAppid",localStorage.getItem("appid"))
		let breadList = [
			{ path: "/index", title: "首页" },
			{
				path: "/index/publicOperation/publicAddress/home",
				title: "公众号运营"
			}
		];
		this.$emit("changeBreadList", breadList);
	},
	mounted() {
		//查询公众号菜单列表
		this.$axios.post(api.findWxMenuList, {
			appid:this.appid
		}).then(res => {
			if (res.data.code) {
				let ret = res.data;
				this.list = ret.object;
				this.list.forEach(item => {
					if(item.child){
						item.child.forEach((items,index) => {
							items.flag = Boolean(Number(items.open));
							items.shortcutFlag = Boolean(items.shortcut);
							items.ipayFlag = Boolean(Number(items.ipay))
						});
					}			
				});
			} else {
				this.$Message.error(res.data.message);
			}
		});
	},
	methods: {
		// 保存修改公众号菜单
		save() {
			let changeList = [];
			this.list.forEach(item => {
				if(item.child){
					item.child.forEach(items => {
						if (items.flag) {
							changeList.push({
								menuid: items.id,
								open: "1",
								priority: items.priority,
								prentId:items.prentId,
								ipay: Number(items.ipayFlag),
								shortcut: Number(items.shortcutFlag).toString()
							});
						}
					});
				}
			})
			let params = {
				appid: this.appid,
				list: changeList
			};
			this.$axios.post(api.updateWxMenuList, params).then(res => {
				if (res.data.code) {
					this.$Message.success("保存成功");
				} else {
					this.$Message.error(res.data.message);
				}
			});
		},
		// 返回
		back() {
			let pageNo = this.$route.query.pageNo;
			// FUNCTIONJS公用 跳转方法
			this.functionJS.queryNavgationTo(this, "/index/publicOperation/publicAddress/home", {
				pageNo
			});
		},
	}
};
</script>
<style lang="less" scoped>
.list {
	width: calc(100%);
	padding: 10px 30px;
	padding-bottom: 50px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin: 15px 0;
		font-weight: bold;
		text-align: center;
		color: #333
	}
	.main {		
		position: relative;
		width: 100%;
		margin-top: 10px;
		.select {
			margin: 20px;
			border: 1px solid #f0f0f0;
			box-shadow: 0 4px 3px #ebedf8;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			padding-bottom: 10px;
			.title {
				font-size: 18px;
				padding-left: 15px;
				color: #333;
				height: 40px;
				line-height: 40px;
				background: #ebedf8; 
				font-weight: 600;  
				margin-bottom: 10px;      
			}
			.all {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-wrap: wrap;
				.item {
					width: 48%;
					display: flex;
					flex-direction: row;
					align-items: center;
					line-height: 40px;
					justify-content: space-around;
					.content {
						width: 100px;
					}
				}
			}
		}
		.main_save{
			position: fixed;
			right: 100px;
			bottom: 40px;
		}
	}
}
</style>
